<template>
  <div>
    <div>
      <div style="display:flex;justify-content:space-between;">
        <partitionTree :nodeData="nodeData" :defaultProps="defaultProps" :dialogName="'项目'" :addTemplate="false"
          minHeight="calc(100vh - 142px)" @handleNodeClick="handleNodeClick" @TreeClassClick="TreeClassClick"
          :TreeClass="TreeClass" ref="partitionTree" @toggleVisibility="toggleVisibility"></partitionTree>
        <div :style="{ width: containerWidth }" style="background:#fff;" class="box">
          <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset"></connsearch>
          <el-table stripe border :data="tableData" style="width: 100%;">
            <el-table-column label="序号" width="80" type="index"
              :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
            <el-table-column label="配件类型" prop="Type" show-overflow-tooltip width="200">
              <template slot-scope="{row}">
                {{ getType(row.Type) }}
              </template>
            </el-table-column>
            <el-table-column label="配件信息" prop="Orig" show-overflow-tooltip></el-table-column>
            <el-table-column label="描述" prop="Descp" show-overflow-tooltip></el-table-column>
            <el-table-column label="确认状态" prop="IsAck" show-overflow-tooltip width="100">
              <template slot-scope="{row}">
                <span style="color:#909399" v-show="row.IsAck == 0">未确认</span>
                <span style="color:#67C23A" v-show="row.IsAck == 1">已确认</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160px" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" :type="scope.row.IsAck == 1 ? 'info' : 'success'" :disabled="scope.row.IsAck == 1"
                  @click="changeMailGlobal(scope.row)">确 认</el-button>
                <el-button type="primary" size="mini" @click="changeModer(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=pageNum
            :page-size=pageSize background layout="total, prev, pager, sizes, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="moderVisible"
      :title="Action === 1 ? '添加' : '修改'" v-el-drag-dialog @close="Moder = {}" width="800px">
      <el-form label-width="100px" :rules="rules" :model="Moder" ref="Moder">
        <el-form-item label="配件类型" prop="Type">
          <el-select v-model="Moder.Type" placeholder="请选择项目分类" :disabled="Action === 2" allow-create style="width:100%"
            filterable :id="`inputTypeId${1}`" :default-first-option="true" @blur="selectBlur($event, 'Type')" v-no-space
            :filter-method="$event => inputTypeLimit($event, 1)">
            <el-option v-for="(item, index) in ClassList" :key="index" :label="item.URL" :value="item.Name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配件信息" prop="Orig">
          <el-input placeholder="请输入配件信息" maxlength="128" :disabled="Action === 2" v-model="Moder.Orig"></el-input>
        </el-form-item>
        <el-form-item label="确认状态" prop="IsAck">
          <el-select v-model="Moder.IsAck" placeholder="请选择确认状态" style="width:100%">
            <el-option label="未确认" :value="0"></el-option>
            <el-option label="已确认" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="Descp">
          <el-input placeholder="请输入描述" maxlength="64" type="textarea" :rows="3" v-model="Moder.Descp"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="moderVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const noSpaceDirective = {
  bind(el, binding, vnode) {
    const input = el.querySelector('.el-input__inner');
    if (input) {
      input.addEventListener('keydown', (event) => {
        if (event.key === ' ' || event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
  },
  unbind(el) {
    const input = el.querySelector('.el-input__inner');
    if (input) {
      input.removeEventListener('keydown', (event) => {
        if (event.key === ' ' || event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
  },
}
import Cookies from 'js-cookie'
import { connrequest } from '@/api/firstPage'
import elDragDialog from "@/directive/el-drag-dialog";
import partitionTree from "@/components/partitionTree";
import connsearch from "@/components/connSearch";
export default {
  directives: {
    elDragDialog,
    'no-space': noSpaceDirective,
  },
  components: {
    partitionTree,
    connsearch
  },
  data() {
    let that = this
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      containerWidth: 'calc(100% - 275px)',
      tableData: [],
      TreeClass: 1,
      nodeData: [],
      defaultProps: {
        children: 'Class',
        label: 'URL',
        Count: 'Count'
      },
      Action: 1,
      ClassList: [],
      LevelList: [],
      Moder: {},
      moderVisible: false,
      searchform: {},
      rules: {
        Type: [
          { required: true, message: '请输入配件类型', trigger: 'blur' }
        ],
        Orig: [
          { required: true, message: '请输入配件信息', trigger: 'blur' }
        ],
      },
      formOptions: [
        {
          col: 8,
          label: "描述",
          prop: "Descp",
          element: "el-input",
          placeholder: "请输入描述，支持模糊查询。",
          maxlength: 50,
          events: {
            input(val) {
              that.searchform.Descp = val
            }
          }
        },
      ]
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.pageSize = (Cookies.get('Zhuoguan_DefaultPageLength') || 10) * 1;

  },
  methods: {
    getType(Type) {
      const TypeMap = {
        'Audio': '声卡',
        'Display': '显示器',
        'FullDisk': '磁盘',
        'Mainboard': '主板',
        'Mem': '内存',
        'NetCard': '网卡',
      };
      return TypeMap[Type] || Type
    },
    async getData(Name = '') {
      const res = await connrequest('GetDictHardwareSumByType')
      this.nodeData = [{
        Name: '项目分类',
        URL: '项目分类',
        Class: res.Data
      }]
      this.pageNum = 1
      this.PrimName = Name
      this.GetDictHardware(Name)
    },
    async TreeClassClick(TreeClass = 1, Name = '', pageNum = 1) {
      this.TreeClass = TreeClass
      this.PrimName = ''
      this.pageNum = pageNum
      const res = await connrequest(TreeClass === 1 ? 'GetDictHardwareSumByType' : 'GetDictHardwareSumByLevel')
      this.nodeData = [{
        Name: TreeClass === 1 ? '项目分类' : '安全等级',
        URL: '项目分类',
        Class: res.Data
      }]
      this.GetDictHardware(Name)
    },
    handleNodeClick(nodeData) {
      this.pageNum = 1
      const { data } = nodeData
      let PrimName = (data.Name === '项目分类' || data.Name === '安全等级') ? '' : data.Name
      this.PrimName = PrimName
      this.GetDictHardware(this.PrimName)
    },
    async GetDictHardware(Name) {
      const filterType = this.TreeClass === 1 ? 'Class' : 'Level';
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          [filterType]: Name || '',
          Type: this.searchform.Type || '',
          Descp: this.searchform.Descp || '',
        }
      }
      const res = await connrequest('GetDictHardware', data)
      this.tableData = res.Data
      this.total = res.Paging.TotalCount
    },
    async changeModer(row) {
      this.Action = 2
      const ClassRes = await connrequest('GetDictHardwareSumByType')
      this.ClassList = ClassRes.Data
      this.Moder = { ...row }
      this.moderVisible = true
    },
    async changeMailGlobal(row) {
      const data = {
        Data: {
          ...row,
          IsAck: 1
        }
      }
      const res = await connrequest('EditDictHardware', data)
      if (res.Status.StatusCode === 0) {
        this.$message.success('确认成功')
        await this.TreeClassClick(this.TreeClass, this.PrimName, this.pageNum)
        this.$refs.partitionTree.changeHighlightCurrent(this.TreeClass === 1 ? row.Class : row.Level)
      }
    },
    async submit() {
      this.$refs['Moder'].validate(async (valid) => {
        if (valid) {
          const data = {
            Data: {
              ...this.Moder
            }
          }
          const res = await connrequest('EditDictHardware', data)
          if (res.Status.StatusCode === 0) {
            this.$message.success(this.Action === 1 ? '新增成功' : '修改成功')
            this.moderVisible = false
            await this.TreeClassClick(this.TreeClass, this.PrimName, this.pageNum)
            this.$refs.partitionTree.changeHighlightCurrent(this.TreeClass === 1 ? this.Moder.Class : this.Moder.Level)
          }
        }
      })
    },
    selectBlur(e, key) {
      if (e.target.value) {
        this.$set(this.Moder, key, e.target.value);
      }
    },
    // 输入限制
    inputTypeLimit(event, index) {
      var inputTypeId = document.querySelector(`#inputTypeId${index}`)
      if (inputTypeId) {
        inputTypeId.setAttribute('maxLength', 16)
      }
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchobj = { ...val }
      this.searchform = { ...val }
      this.GetDictHardware(this.PrimName)
    },
    // 重置
    reset() {
      this.pageNum = 1
      this.formOptions = this.formOptions.map(item => {
        item.initValue = ""
        return item
      })
      this.searchform = {}
      this.searchobj = {}
      this.$refs.connsearch.addInitValue()
      this.GetDictHardware(this.PrimName)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetDictHardware(this.PrimName)
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.GetDictHardware(this.PrimName)
    },
    toggleVisibility(isHidden) {
      if (isHidden)
        this.containerWidth = '100%';
      else
        this.containerWidth = 'calc(100% - 275px)';
    }
  }
};
</script>
<style scoped>
.box {
  background-color: lightblue;
  transition: width 0.5s;
  /* 添加过渡动画 */
}
</style>
